<template>
	<view class="wrap" v-if="con">
    <u-toast ref="uToast" />
    <!-- {{JSON.stringify(con)}} -->
    <view class="search-box">
      <view class="tit u-font-30">{{con.house_title}}</view>
      <view class="u-flex u-row-between u-flex-wrap box2">
        <view class="item u-flex">
          <view class="lab">面积</view>
          <view class="u-primary">{{getString('house_area')}}㎡</view>
        </view>
        <view class="item u-flex">
          <view class="lab">月租</view>
          <view class="u-primary">{{getString('house_rent')}} <text v-if="con.house_rent">元</text></view>
        </view>
        <view class="item u-flex">
          <view class="lab">楼层</view>
          <view>{{getString('house_floor_num')}}楼</view>
        </view>
        <view class="item u-flex">
          <view class="lab">类型</view>
          <view>{{getString('house_floor_type_name')}}</view>
        </view>
        <view class="item u-flex">
          <view class="lab">装修</view>
          <view>{{getString('house_decoration_name')}}</view>
        </view>
        <view class="item u-flex">
          <view class="lab">支付</view>
          <view>{{getString('payment_method_type_name')}}</view>
        </view>
        <view class="item u-flex">
          <view class="lab">朝向</view>
          <view>{{getString('house_toward_name')}}</view>
        </view>
      </view>
      <view v-if="con.config_list && con.config_list.length > 0" class="box6">
        <view class="u-font-30 xs-name u-m-b-30">房源设施</view>
        <view class="sheshi-list u-flex">
          <view v-for="item in con.config_list" :key="item.id" class="item u-flex">
            <image :src="http+item.configImage" mode="" class="icon"></image>
            <view>{{item.configName}}</view>
          </view>
        </view>
      </view>
      
      <view class="box3">
        <view class="u-font-30 xs-name u-m-b-30">租赁方式</view>
        <u-radio-group v-model="formData.type_id">
          <u-radio v-for="(item, index) in list" :key="index" :name="item.id" >
            {{item.name}}
          </u-radio>
        </u-radio-group>
        
        <view v-if="formData.type_id == 1" class="item u-flex u-m-t-20">
          <text class="lab">租赁月数：</text>
          <view class="u-flex u-col-center">
            <view class="add-btn" @click="addChange(0)">-</view>
            <u-input @input="changeInput" v-model="formData.month_number" type="number" class="add-text" :border="true" />
            <view class="add-btn" @click="addChange(1)">+</view>
          </view>
          
        </view>
        <view class="item u-flex u-m-b-20 u-m-t-20">
          <text class="lab">开始时间：</text>
          <picker class="u-flex-1" mode="date" @change="bindDateChange($event,'start_date')">
          	<view class="u-flex u-flex-1 u-col-center u-p-t-10 u-p-b-10" style="justify-content: space-between;">
            {{formData.start_date}}
              <u-icon name="arrow-right" color="#999" size="28"></u-icon>
            </view>
          </picker>
        </view>
        <view class="item u-flex">
          <text class="lab">结束时间：</text>
          <text v-show="formData.type_id == 1">{{formData.end_date}}</text>
          <picker v-show="formData.type_id == 2" class="u-flex-1" :start="getNDaysBefore(formData.start_date, -9)" mode="date" @change="bindDateChange($event,'end_date')">
          	<view class="u-flex u-flex-1 u-col-center u-p-t-10 u-p-b-10" style="justify-content: space-between;">
              {{formData.end_date}}
              <u-icon name="arrow-right" color="#999" size="28"></u-icon>
            </view>
          </picker>
        </view>
        
        <view class="item u-flex" style="padding:26rpx 0">
          <text class="lab">房屋押金：</text>
          <text>{{con.house_deposit}}</text>
        </view>
        
        <view class="item u-flex" style="padding:0 0 26rpx 0">
          <text class="lab">订单金额：</text>
          <text>{{all_price}}</text>
        </view>
        
        
        
        
      </view>
      
      <view class="u-flex u-col-center u-row-bettwen" style="width: 100%; justify-content: space-between;">
        <u-button type="primary" class="call-btn submit-btn u-font-30" @click="submit()">下单</u-button>
      </view>
    </view>
    <zb-pay ref="payRef" />
  </view>
</template>
<style lang="scss" scoped>
  .add-btn{width:70rpx; height: 70rpx; display: flex; align-items: center; justify-content: center; font-size: 40rpx; background-color: #f5f5f5; border-radius: 4rpx;}
  .add-text{margin: 0 16rpx; width: 160rpx; text-align: center;}
  .wrap{background-color: #fff; padding-top: 50rpx;}
  .call-btn{margin: 40rpx 0;}
  .submit-btn{width: 100%; border-radius: 60rpx; overflow: hidden;}
  .steps{
    .item{
      padding-bottom: 40rpx; position: relative; line-height: 36rpx; align-items: flex-start;
      &::after{content:''; display: block; width: 1px; height: 100%; background-color: #ededed; position: absolute; left: 10rpx; top: 20rpx; z-index: 1;}
      &:last-child{
        &::after{display: none;}
      }
      &:first-child{
        color: #2A70F9;
        .icon{background-color: #2A70F9;}
        
      }
    }
    .icon{width: 20rpx; height: 20rpx; background-color: #ddd; border-radius: 50%; position: relative; z-index: 50;margin-right: 16rpx; margin-top: 12rpx;}
    .name{flex: 1; width: 100%; font-size: 28rpx;}
    .time{font-size: 26rpx; color: #666; margin-top: 8rpx;}
    
  }
  .xs-name{margin-bottom: 10rpx; font-weight: bold;}
  .sheshi-list{
    flex-wrap: wrap;
    .item{
      width: 32%; margin-right: 2%; margin-bottom: 10rpx;
      &:nth-child(3n+3){margin-right: 0px;}
    }
    .icon{width: 30rpx; height: 30rpx; object-fit: contain; margin-right: 10rpx;}
    .txt{}
  }
  .box1{
    margin-bottom: 20px;
    
    .item{width: 48%; text-align: center;}
  }
  .box2{
    padding-bottom: 20rpx; border-bottom: 1px solid #ededed; margin-bottom: 20rpx;
    .lab{width: 100rpx; color: #999;}
    .item{width: 48%; margin-bottom: 16rpx;}
  }
  .box3{
    margin-bottom: 20px;
    
  }
  .box4{
    padding: 20rpx; background-color: #F5F6FA; margin-bottom: 20px; border-radius: 6rpx;
  }
  .box6{
    
  }
  .box5,.box6{
    margin-bottom: 30rpx; padding-bottom: 30rpx; border-bottom: 1px solid #ededed;
  }
  .list{
    .item{
      padding: 30rpx; margin-bottom: 30rpx; border-bottom: 1px solid #ededed; padding-top: 0;
      .name{font-size: 30rpx; margin-bottom: 14rpx; color: #3C3D3E;}
      .lab{color: #3C3D3E; margin-bottom: 20rpx;}
      .price1{color: #2A70F9; font-size: 30rpx;}
      .div{margin-left: 20rpx;}
    }
  }
  .ban{position: relative; z-index: 1;}
  .search-box{
    padding: 30rpx; margin-top: -30rpx; position: relative; z-index: 4; border-radius: 10rpx 10rpx 0 0; background-color: #fff; padding-bottom: 10rpx;
  }
  
</style>
<script>
	export default {
		data() {
      const currentDate1 = this.getDate(0)
      const currentDate2 = this.getDate(1)
			return {
        show:false,
        list:[{id:1, name:"按月租赁"}, {id:2, name:"按天租赁"}],
        content:'',
        con:null,
        http:'',
        ban:[],
        type:1, // 1-业务员详情， 2-用户端房源详情
        id:'',
        formData:{
          house_sn:'',
          start_date:currentDate1,
          end_date:currentDate2,
          type_id:1, // 1按月，2-按天
          month_number:12, // 月数
        },
        all_price:''
			}
		},
    onLoad(e){
      this.id = e.id
      this.http = this.$api.httpUrlApi();
      this.formData.house_sn = e.id;
      this.getOrderFeeData()
      this.$api.userHousingResourcesDetailApi({house_sn: e.id}).then(res=>{
        if(res.code === 1){
          this.con = res.data;
          this.content = res.data.content ? res.data.content : '';
          if(res.data.images && res.data.images.length > 0){
            this.ban = res.data.images.map(m => {
              return this.http+m.image
            })
          }
        }else{
          this.$refs.uToast.show({
            title: res.msg,
          })
        }
      })
    },
    watch: {
      formData:{
        handler(n,o){
          this.getOrderFeeData()
          console.log('222222', n, o)
          if(n.type_id == 1){
            this.changeEndTime()
          }
        },
        immediate:true,
        deep:true
      }
    },
    
		methods: {
      changeInput(e){
        console.log('e--', e)
        this.formData.month_number = Number(e)
        this.changeEndTime()
      },
      addChange(e){
        if(e == 0 && this.formData.month_number > 1){
          this.formData.month_number--
        }else if(e == 1){
          this.formData.month_number++
        }
        this.changeEndTime()
      },
      getNDaysBefore1(date, n) {
        const newDate = new Date(date);
        newDate.setDate(newDate.getDate() - n);
        console.log('newDate', newDate)
        return newDate;
      },
      getNDaysBefore(dateStr, n) {
          // 将输入的日期字符串解析为Date对象
          var date = new Date(dateStr);
          
          // 计算前N天的日期
          date.setDate(date.getDate() - n);
          
          // 格式化输出日期
          var year = date.getFullYear();
          var month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份从0开始，所以要+1
          var day = ("0" + date.getDate()).slice(-2);
          
          return year + "-" + month + "-" + day;
      },
      changeEndTime() {
        const date = this.formData.start_date;
        const n = this.formData.month_number;
        let result = new Date(date);
        let month = result.getMonth(); // 获取当前月份，注意JavaScript中的月份是从0开始的，即1月为0
        result.setMonth(result.getMonth() + n); // 加上需要增加的月份数
        // 如果日期超出了新月份的最大天数（例如，从2月30日调整到3月30日），则需要进行调整
        if (result.getMonth() !== (month + n) % 12) {
          result.setDate(0);  // 将日期设置为新月份的第一天，然后减去一天，以获得上一个月的最后一天
        }
    
        // 格式化输出日期
        const year = result.getFullYear();
        const monthStr = String(result.getMonth() + 1).padStart(2, '0');
        const dayStr = String(result.getDate()).padStart(2, '0');
        
        this.formData.end_date = `${year}-${monthStr}-${dayStr}`;
        this.getOrderFeeData()
      },
      getOrderFeeData(){
        this.$api.getOrderFeeApi(this.formData).then(res=>{
          this.all_price = res.data.orderFee
        })
      },
      getString(e){
        return this.con[e] ? this.con[e] : '-'
      },
      bindDateChange(e, name){
        console.log('sdasd', e)
        this.formData[name] = e.detail.value
      },
      getDate(num) {
          const date = new Date();
          let year = date.getFullYear();
          let month = date.getMonth() + 1;
          let day = date.getDate();
          year = year + num;
          month = month > 9 ? month : '0' + month;
          day = day > 9 ? day : '0' + day;
          return `${year}-${month}-${day}`;
      },
      submit(){
        uni.showLoading()
        this.$api.addOrderHousingResourcesApi(this.formData).then(res=>{
          uni.hideLoading()
          if(res.code === 0) return this.$refs.uToast.show({ title:res.msg, })
          const datas = {
            house_title: this.con.house_title, // 标题
            house_sn: this.con.houseSn,
            start_date:this.formData.start_date,
            end_date:this.formData.end_date,
            type_id:this.formData.type_id, // 1按月，2-按天
            month_number:this.formData.month_number, // 月数
            ordersNo:res.data.ordersNo,
            orderFee: res.data.orderFee, // 总价
            payment_method_type_name: this.con.payment_method_type_name, // 缴费方式
            house_deposit: this.con.house_deposit,
            link:1
           }
          this.$refs.payRef.showFun(datas)
        })
      },
		},
    onShareAppMessage() {
      // return {
      //   title: '',
      //   path: '/pages/index/index',
      // }
    },
	}
</script>